<template>
    <scroll-view class="contanier" :scroll-y="true"> 
        <view class="group-list">
            <view class="people-list">
                <block v-for="(userObj,idx) in groupUsers" :key="'useritem-'+idx" >
                    <view v-if="idx<showUserCount" class="people-item" @click="handlerUserClick(userObj,idx)">
                        <up-avatar :src="userObj.avatarUrl" shape="square" size="60"></up-avatar>
                        <view class="title">{{userObj.nickname}}</view>
                        <view class="click-radio" v-if="isEditUser && userObj.id!=project.createBy && userObj.id!=user.id" :class="{'check':groupSelIdx.indexOf(idx)>-1}">
                            <up-icon v-if="groupSelIdx.indexOf(idx)>-1" name="checkmark-circle-fill" size="15" color="#4cd964"></up-icon>
                        </view>
                    </view>
                </block>
                
                <block v-if="!isEditUser">
                    <view class="people-item">
                        <view class="btn" @click="toInviteUser">
                            <up-icon name="plus" size="40"></up-icon>
                        </view>
                    </view>
                    <view class="people-item" v-if="checkEditAuth()">
                        <view class="btn btn-remove" @click="handlerDelUser">
                            <up-icon name="minus" size="40" color="#dd524d"></up-icon>
                        </view>
                    </view>
                </block>

                <block v-if="isEditUser">
                    <view class="people-item">
                        <view class="btn btn-success" @click="handlerEditAfter('confirm')">
                            <up-icon name="checkmark" size="40" color="#4cd964"></up-icon>
                        </view>
                    </view>
                    <view class="people-item">
                        <view class="btn btn-remove" @click="handlerEditAfter('cancel')">
                            <up-icon name="close" size="40" color="#dd524d"></up-icon>
                        </view>
                    </view>
                </block>
                
                
            </view>
            <view class="more-btn" v-if="!moreUser && groupUsers.length>18" @click="handlerMoreUser(true)">
                <view>查看更多</view>
                <up-icon name="arrow-down"></up-icon>
            </view>
            <view class="more-btn" v-if="moreUser" @click="handlerMoreUser(false)">
                <view>收起</view>
                <up-icon name="arrow-up"></up-icon>
            </view>
        </view>
        <view>
            <u-cell-group>
                <up-cell title="项目名称" :value="project.name" @click="toEditSetting('projectName')">
                    <template #right-icon>
                        <up-icon name="arrow-right"></up-icon>
                    </template>
                </up-cell>
                <up-cell title="项目二维码" arrowDirection="right" @click="toEditSetting('projectQRCode')">
                    <template #value>
                        <view class="iconfont aa-erweima"></view>
                    </template>
                    <template #right-icon>
                        <up-icon name="arrow-right"></up-icon>
                    </template>
                </up-cell>
                <up-cell title="成员分组" arrowDirection="right" @click="toPage('/pages/aaProject/setting/peopleGroup')">
                    <template #right-icon>
                        <up-icon name="arrow-right"></up-icon>
                    </template>
                </up-cell>
                
                <up-cell title="项目转让" arrowDirection="right" v-if="project.createBy==user.id" @click="toPage('/pages/aaProject/transfer')">
                    <template #right-icon>
                        <up-icon name="arrow-right"></up-icon>
                    </template>
                </up-cell>
            </u-cell-group>

            <u-cell-group>
                <up-cell title="分账报告" @click="toPage('/pages/aaProject/report?projectId='+project.id)">
                    <template #right-icon>
                        <up-icon name="arrow-right"></up-icon>
                    </template>
                </up-cell>
            </u-cell-group>

            <view class="footer-act-box">
                <view class="act-item">
                    <up-button type="error" @click="handlerExitProject">退出项目</up-button>
                </view>
                
                <view class="act-item" v-if="project.createBy==user.id">
                    <up-text text="解散项目" align="center" type="error" @click="handlerDelProject"></up-text>
                </view>
            </view>

            
            <view style="height: 30px;"></view>
        </view>
    </scroll-view>
</template>

<script lang="ts">

    import { mapActions, mapState } from "pinia";
    import { DeleteProjectReq, DelProjectUsers, GetProjectUsersReq, ProjectUpdReq, QuitProjectReq } from "../../../http/project";
    import {MyAlert} from "/utils/utils.ts"
    import { useProjectStore } from "../../../store/projectStore";
    import { useUserStore } from "../../../store/userStore";

    export default {
        name:"ProjectSettingBox", 
        components:{},
        options: { styleIsolation: 'shared' },
        props:{},
        data(){
            return {
                avatarUrl:"https://uview-plus.jiangruyi.com/h5/static/uview/album/2.jpg",
                moreUser:false,
                groupUsers:[],
                groupSelIdx:[],
                isEditUser:false,
                showUserCount:15,
            }
        },
        computed:{
			...mapState(useProjectStore,['project']),
            ...mapState(useUserStore,['user'])
		},
        mounted(){
            this.getUserList()
        },
        methods:{
            ...mapActions(useProjectStore,['setProject','isProjectAdmin']),
            ...mapActions(useUserStore,['isSuperAdmin']),
            toPage(page){
                uni.navigateTo({
                	url:page
                })
            },
            getUserList(){
                GetProjectUsersReq({}).then(res=>{
                    this.groupUsers=res.data.list
                })
            },
            toInviteUser(){
                uni.navigateTo({
                	url:"/pages/aaProject/userInvite",
                    success:(res)=>{
                    }
                })
            },
            checkEditAuth(){
                return this.isSuperAdmin() || this.isProjectAdmin()
            },
            toEditSetting(type){
                if (!this.checkEditAuth() && type!="projectQRCode") return
                const editTypeData={
                    projectName:{
                        title:"修改项目名称",
                        content:"修改项目名后，会同步整个项目",
                        confirm: async (value)=>{
                            let postData={...this.project}
                            postData.name=value
                            const res=await ProjectUpdReq(postData)
                            this.setProject(postData)
                            return Promise.resolve(res)
                        }
                    },
                    projectQRCode:{
                        title:"项目二维码",
                        content:"扫码二维码即可加入此项目",
                    }
                }
                uni.navigateTo({
                	url:"/pages/aaProject/setting/editSetting",
                    success:(res)=>{
                        res.eventChannel.emit("toPageConfig",{type:type,...editTypeData[type]})
                    }
                })
            },
            handlerMoreUser(){
                this.moreUser=!this.moreUser
                if(this.moreUser){
                    this.showUserCount=9999
                }else{
                    this.showUserCount=15
                }
            },
            handlerDelUser(){
                this.isEditUser=true
            },
            async handlerExitProject(){
                let res=await MyAlert({title:"是否退出项目",content:"退出项目后无法查看到项目信息"})
                if(res!==true) return
                QuitProjectReq({pid:this.project.id}).then(res=>{
                    this.setProject({})
                    uni.redirectTo({
                        url:"/pages/index",
                        success:(res)=>{
                            res.eventChannel.emit("projectRefresh")
                        }
                    })
                })
            },
            handlerUserClick(user,idx){
                if(this.isEditUser && user.id!=this.project.createBy && user.id!=this.user.id){
                    const userIdx=this.groupSelIdx.indexOf(idx)
                    if(userIdx<0){
                        this.groupSelIdx.push(idx)
                    }else{
                        this.groupSelIdx.splice(userIdx,1)
                    }
                    console.log(userIdx)
                }
                console.log(this.groupSelIdx)
            },
            async handlerEditAfter(type){
                if(type=="confirm"){ 
                    let confirm=await MyAlert({title:"删除",content:"是否删除这些用户？"})
                    if(confirm!==true) return
                    const userSelected=this.groupSelIdx.map((idx)=>{
                        return this.groupUsers[idx].id
                    })
                    const residue=this.groupUsers.filter((item,idx)=>{
                        return this.groupSelIdx.indexOf(idx)<0
                    })
                    this.groupUsers=[...residue]

                    console.log(this.groupUsers)
                    
                }
                this.isEditUser=false
                this.groupSelIdx=[]
            },
            async handlerDelProject(){
                let res=await MyAlert({title:"是否解散项目",content:"解散项目后不再恢复！"})
                if(res!==true) return
                DeleteProjectReq({pid:this.project.id}).then(()=>{
                    uni.reLaunch({
                        url:"/pages/index",
                        success:(res)=>{
                            
                        }
                    })
                })
            }
        }
    } 
	
</script>

<style lang="scss">
    .contanier{
        height: 100%;
    }
    .footer-act-box{
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 15px;
        .act-item{
            margin-bottom:  10px ;
            width: 100%;
        }
    }
    .group-list{
        width: 100%;
        text-align: center;
        .people-list{
            display: flex;
            align-items:normal;
            flex-wrap: wrap;
            .people-item{
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 60px;
                margin: 10px;
                .title{
                    white-space: nowrap;
                    font-size: 12px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    width: 50px;
                }
                .click-radio{
                    text-align: center;
                    width: 15px;
                    height: 15px;
                    border: 2px solid #505050;
                    border-radius: 50%;
                    position: absolute;
                    right: -7.5px;
                    top: -7.5px;
                    background: #fff;
                }
                .check{
                    color: $uni-color-success;
                    border-color: $uni-color-success;
                }
            }
            .btn{
                border: 3px dotted #969696;
                width: 54px;
                height: 54px;
                text-align: center;
                border-radius: 10upx;
                display: flex;
                justify-content: center;
            }
            .btn-remove{
                border-color: $uni-color-error;
            }
            .btn-success{
                border-color: $uni-color-success;
            }
        }
    }
    .more-btn{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80upx;
    }
</style>